<template>
	<div class="container">
		<div class="jx-container">
      <div class="auth-title">
        <div class="wid-anth">
          您好 太平洋保险公司<br/>
          欢迎进行企业资质认证，请按要求填写以下信息
        </div>
      </div>
      <div class="steps-line">
        <div class="wid-anth">
          <el-steps :active="other.step" simple>
            <el-step title="1.账号信息"></el-step>
            <el-step title="2.个人认证信息"></el-step>
            <el-step title="3.企业信息认证"></el-step>
          </el-steps>  
        </div>
      </div>
      <div class="jx-detail">
        <div class="detail-item">
          <div class="wid-anth">
            <div class="item" v-if="other.step == 1">
              <div class="title">账号信息</div>
              <el-form ref="step1_form" :model="params_list" :rules="rules1" label-width="130px" class="jx-form">
                <el-form-item label="企业logo：" class="logo" prop="institutionLogoImgUrl">
                  <el-upload
                    class="avatar-uploader jx-uploader jx-logo"
                    name="imgFile"
                    :headers="headers"
                    :action="`${$api.common.upload}?catalog=index_logo`"
                    :show-file-list="false"
                    :on-success="uploadSuccess">
                    <img v-if="(params_list.institutionLogoImgUrl) && (params_list.institutionLogoImgUrl != '')" :src="params_list.institutionLogoImgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload> 
                </el-form-item>
                <el-form-item label="机构名称：" prop="institutionName">
                  <el-input v-model="params_list.institutionName" placeholder="请输入机构名称"></el-input>
                </el-form-item>
                <el-form-item label="机构类型：" prop="institutionCatalog">
                  <el-select v-model="params_list.institutionCatalog" placeholder="请选择">
                    <el-option v-for="(item,index) in catalogList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所在地区：" prop="institutionProvinceCity">
                  <el-cascader
                    v-model="params_list.institutionProvinceCity"
                    :options="options"
                    :props="props">
                  </el-cascader>
                </el-form-item>
                <el-form-item label="公司地址：" prop="institutionAddress">
                  <el-input v-model="params_list.institutionAddress" placeholder="请输入公司地址"></el-input>
                </el-form-item>
              </el-form>
              <div class="btn-container" style="margin-top: 50px;">
                <el-button class="jx-btn" v-if="other.step == 1" type="primary" @click="tep1Submit('step1_form')" :loading="boo.loading">下一步</el-button>
              </div>
            </div>
            <div class="item" v-if="other.step == 2">
              <div class="title">
                个人认证信息
                <p class="gray">认证必须为企业法人，如果不是企业法人，需提供认证人的企业身份核验资料</p>
              </div>
              <el-form ref="step2_form" :model="params_list" :rules="rules2" label-width="130px" class="jx-form">
                <el-form-item label="认证人姓名：" prop="realName">
                  <el-input v-model="params_list.realName" placeholder="请输入认证人姓名"></el-input>
                </el-form-item>
                <el-form-item label="认证类型：" prop="idCatalog">
                  <el-select class="tel-value" v-model="params_list.idCatalog" placeholder="请选择">
                    <el-option v-for="(item,index) in idCatalogs" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="证件类型：" prop="ordertype">
                  <el-select class="tel-value" v-model="params_list.ordertype" placeholder="身份证" disabled>
                    <el-option label="身份证" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="证件号码：" prop="idNo">
                  <el-input v-model="params_list.idNo" placeholder="请输入证件号码"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：" prop="email">
                  <el-input v-model="params_list.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="证件照片：" prop="frontImgUrl">
                  <div class="unit">
                    <div class="item-inline">
                      <async-example 
                      :img="params_list.frontImgUrl ? params_list.frontImgUrl : ''" 
                      @upload="getImg"></async-example>
                      <p class="blue">身份证正面</p>
                    </div>
                    <div class="item-inline">
                      <async-example 
                      :img="params_list.backImgUrl ? params_list.backImgUrl : ''" 
                      @upload="getImg2"></async-example>
                      <p class="blue">身份证背面</p>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="其他资料：" prop="otherImgUrls">
                  <div class="unit">
                    <div class="item-inline">
                      <async-example 
                      :img="params_list.otherImgUrls ? params_list.otherImgUrls[0] : ''" 
                      @upload="getImg3"></async-example>
                      <p class="blue">委托协议</p>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
              <div class="btn-container" style="margin-top: 50px;">
                <el-button class="jx-btn" v-if="other.step == 2" type="primary" @click="tep2Submit('step2_form')" :loading="boo.loading2">下一步</el-button>
              </div>
            </div>
            <div class="item" v-if="other.step == 3">
              <div class="title">
                企业认证信息
                <p class="gray">认证必须为企业法人，如果不是企业法人，需提供认证人的企业身份核验资料</p>
              </div>
              <el-form ref="step3_form" :model="params_list" :rules="rules3" label-width="130px" class="jx-form">
                <el-form-item label="企业名称：" prop="coName">
                  <el-input v-model="params_list.coName" placeholder="请输入企业名称"></el-input>
                </el-form-item>
                <el-form-item label="营业执照编号：" prop="no">
                  <el-input v-model="params_list.no" placeholder="请输入营业执照编号"></el-input>
                </el-form-item>
                <el-form-item label="营业执照图片：" prop="imgUrl">
                  <div class="unit">
                    <div class="red">请确保图片清晰，文字可辨并有清晰的红色印章</div>
                    <div class="item-inline">
                      <async-example 
                      :img="params_list.imgUrl ? params_list.imgUrl : ''" 
                      @upload="getImg4"></async-example>
                      <p class="blue">营业执照图片</p>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="其他资料：">
                  <div class="unit">
                    <div class="red">请确保图片清晰，文字可辨并有清晰的红色印章</div>
                    <div class="item-inline">
                      <async-example 
                      :img="params_list.insuranceLicenceImgUrl ? params_list.insuranceLicenceImgUrl : ''" 
                      @upload="getImg5"></async-example>
                      <p class="blue">经营保险业务许可证</p>
                    </div>
                    <div class="text">或</div>
                    <div class="item-inline">
                      <async-example 
                      :img="params_list.insuranceAgentLicenceImgUrl ? params_list.insuranceAgentLicenceImgUrl : ''" 
                      @upload="getImg6"></async-example>
                      <p class="blue">经营保险代理业务许可证</p>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
              <div class="btn-container" style="margin-top: 50px;">
                <el-button class="jx-btn" type="warning" @click="delStep">重置</el-button>
                <el-button class="jx-btn" type="primary" @click="submitRow('step3_form')" :loading="boo.loading3">提交</el-button>
              </div>
            </div>
          </div>
        </div>
      </div> 
    </div>
	</div>
</template>

<script>
	export default {
    components: {
      'async-example': () => import('./upload/index')
    },
		data() {
      const validateEmail = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入邮箱'));
        } else {
          if (this.$reg.isEmail(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确邮箱'));
          }
        }
      }
      const validateNo = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入证件号码'));
        } else {
          if (this.$reg.isIDCard(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确证件号码'));
          }
        }
      }
			return {
        https: {
          list: this.$api.common.approve,
          common: this.$api.common
        },
        boo: {
          loading: false,
          saveing: false,
          loading2: false,
          loading3: false,
        },
        other: {
          step: 1,
        },
        headers: {
          'institution-auth-token': localStorage.getItem('ms_token') || ''
        },
        params_list: {
          institutionLogoImgUrl: '',
          institutionLogoImgId: '',
          institutionName: '',
          institutionCatalog: '',
          institutionProvinceCity: '',
          institutionAddress: '',
          realName: '',
          idCatalog: '',
          ordertype: '1', // 个人认证 -- 证件类型
          idNo: '',
          email: '',
          frontImgUrl: '',
          backImgUrl: '',
          otherImgUrls: '',
          coName: '',
          no: '',
          imgUrl: '',
          insuranceLicenceImgUrl: '',
          insuranceAgentLicenceImgUrl: '',
        },
        props: {
          expandTrigger: 'click', 
          value: 'field',
          label: 'field',
        },
        options: '',
        catalogList: '', // 账号信息 -- 机构类型
        idCatalogs: '', // 个人认证 -- 认证类型
        rules1: {
          institutionLogoImgUrl: [{ required: true, message: '请选择企业logo', trigger: 'change' }],
          institutionName: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
          institutionCatalog: [{ required: true, message: '请选择机构类型', trigger: 'change' }],
          institutionProvinceCity: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
          institutionAddress: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
        },
        rules2: {
          realName: [{ required: true, message: '请输入认证人姓名', trigger: 'blur' }],
          idCatalog: [{ required: true, message: '请选择认证类型', trigger: 'change' }],
          // ordertype: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
          idNo: [{ required: true, validator: validateNo, trigger: 'blur' }],
          email: [{ required: true, validator: validateEmail, trigger: 'blur' }],
          frontImgUrl: [{ required: true, message: '请选择证件照片', trigger: 'change' }],
          // otherImgUrls: [{ required: true, message: '请选择委托协议', trigger: 'change' }],
        },
        rules3: {
          coName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
          no: [{ required: true, message: '请输入营业执照编号', trigger: 'blur' }],
          imgUrl: [{ required: true, message: '请选择营业执照', trigger: 'change' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList1()
      _self.getDict('institutionCatalog')
      _self.getDict('idCatalog')
      _self.getAddress()
    },
		methods: {
      getDict(type){
        let _self = this
        let params = {
          dictCode: type,
        }
        // 新建判断Map
        let actions = (i,list,)=>{
          return new Map([
            ['institutionCatalog',()=>{
              _self.catalogList = list
            }],
            ['idCatalog',()=>{
              _self.idCatalogs = list
            }]
          ]).get(i).call(this)
        }
        let success = (res)=>{
          if(res.data.retCode == 1){
            actions(type,res.data.retObject)
          }else{
            _self.$message.error(res.data.retMsg)
          }
        }
        _self.$axios.get(_self.https.common.dict, params, success) 
      },
      getAddress(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.options = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.common.address, {}, success) 
      },
      getList1(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.params_list = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.list.getinfo1, {}, success) 
      },
      getList2(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.params_list = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.list.getinfo2, {}, success) 
      },
      getList3(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.params_list = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.list.getinfo3, {}, success) 
      },
      uploadSuccess(res, file){
        let _self = this
        if(!res) return
        if(res.retCode == 1){
          _self.params_list.institutionLogoImgUrl = res.retObject.defaultImgDetail.path
          _self.params_list.institutionLogoImgId = res.retObject.imgId
        }else{
          _self.$message.error(res.retMsg)
        }
      },
      getImg(item){
        let _self = this
        _self.params_list.frontImgId = item.id
      },
      getImg2(item){
        let _self = this
        _self.params_list.backImgId = item.id
      },
      getImg3(item){
        let _self = this
        _self.params_list.otherImgId = item.id
      },
      getImg4(){
        let _self = this
        _self.params_list.imgId = item.id
      },
      getImg5(){
        let _self = this
        _self.params_list.insuranceLicenceImgId = item.id
      },
      getImg6(){
        let _self = this
        _self.params_list.insuranceAgentLicenceImgId = item.id
      },
      tep1Submit(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            _self.boo.loading = true
            let params = {
              institutionLogoImgId: _self.params_list.institutionLogoImgId,
              institutionName: _self.params_list.institutionName,
              institutionCatalog: _self.params_list.institutionCatalog,
              institutionProvinceCity: _self.params_list.institutionProvinceCity,
              institutionAddress: _self.params_list.institutionAddress,
            }    
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                _self.getList2()
                _self.other.step = 2
              }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.loading = false
            }
            _self.$axios.get(_self.https.list.setinfo1, params, success)   
					}else{
						return false
					}
				})
      },
      tep2Submit(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            console.log(_self.params_list)
            if(_self.params_list.backImgId == '') return _self.$message.error('请选择身份证背面')
            let params = {
              realName: _self.params_list.realName,
              idCatalog: _self.params_list.idCatalog,
              idNo: _self.params_list.idNo,
              email: _self.params_list.email,
              frontImgId: _self.params_list.frontImgId,
              backImgId: _self.params_list.backImgId,
              otherImgId: _self.params_list.otherImgId,
            }    
            _self.boo.loading2 = true
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                _self.getList3()
                _self.other.step = 3
              }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.loading2 = false
            }
            _self.$axios.get(_self.https.list.setinfo2, params, success)  
					}else{
						return false
					}
				})
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            _self.boo.loading3 = true
            let params = {
              coName: _self.params_list.coName,
              no: _self.params_list.no,
              imgId: _self.params_list.imgId,
              insuranceLicenceImgId: _self.params_list.insuranceLicenceImgId,
              insuranceAgentLicenceImgId: _self.params_list.insuranceAgentLicenceImgId,
            }    
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                setTimeout(()=>{
                  _self.$router.replace({name: 'pc_index'})
                }, 500)
              }else{
                _self.$message.error(res.message)
              }
              _self.boo.loading3 = false
            }
            _self.$axios.get(_self.https.list.setinfo3, params, success)   
					}else{
						return false
					}
				})
      },
      delStep(){
        let _self = this
        _self.other.step = 1
        // _self.boo.loading = false
        
      },
    }
	}

</script>
<style scoped lang="sass">
  .container
    position: absolute
    left: 0
    right: 0
    top: 0
  .auth-title
    padding: 30px 0
    background: #f2f2f2
    font-size: 18px
    font-weight: 600
    line-height: 32px
  .wid-anth
    width: 1200px
    margin: 0 auto
  .gray
    display: inline-block
  .jx-form /deep/ .el-form-item__label
    color: #333
  .el-select-dropdown__item
    height: 36px
    line-height: 36px
    .icon
      width: 20px
      position: relative
      top: 2px
  .steps-line
    border-bottom: 1px solid #e4e4e4
    .el-steps--simple
      background: #fff
      padding: 23px 0
    /deep/ .el-step.is-simple .el-step__icon
      width: 0
      height: 0
      border: 0
    /deep/ .el-step.is-simple .el-step__title
      font-size: 18px
  .jx-detail .title
    font-size: 18px
    margin-bottom: 45px
    p
      display: block 
      margin: 10px auto 0
      font-size: 13px 
      font-weight: 500
  .jx-detail 
    /deep/ .logo .el-form-item__label
      line-height: 100px
  .jx-logo
    /deep/ .el-upload
      border-radius: 50%
    /deep/ .avatar-uploader-icon
      border-radius: 50%
  .unit
    display: flex
    flex-wrap: wrap
    margin-bottom: 20px
    .red
      width: 100%
      margin-bottom: 10px
    .text
      margin-right: 50px
      line-height: 110px
    .item-inline
      margin-right: 50px
      text-align: center
</style>
